<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small" inline>
          <el-row>
            <el-form-item>
              <el-date-picker
                clearable
                v-model="queryParams.time"
                type="daterange"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
                @change="getList"
                :clearable="false"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>

            <el-form-item prop="spNo">
              <el-select @change="handleQuery" clearable v-model="queryParams.status" :placeholder="$t('状态')">
                <!-- 状态: 1:创建中 2:已提交 3:已完成 4:已取消 -->
                <el-option label="创建中" :value="1" />
                <el-option label="已提交" :value="2" />
                <el-option label="已完成" :value="3" />
                <el-option label="已取消" :value="4" />
              </el-select>
            </el-form-item>
            <el-form-item prop="skuNo">
              <el-input
                :placeholder="$t('sku编号')"
                @keyup.enter.native="handleQuery"
                clearable
                v-model="queryParams.skuNo"
              />
            </el-form-item>
            <el-form-item prop="shopId">
              <el-select @change="handleQuery" clearable v-model="queryParams.shopId" :placeholder="$t('店铺')">
                <el-option :label="item.name" :value="item.id" v-for="item in distributorShopList" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-button
          v-hasPermi="['distribution:skuSellerOffline:add']"
          type="primary"
          plain
          @click="handleCreateOrder"
          size="mini"
        >
          {{ $t('创建线下取货单') }}
        </el-button>
      </template>
    </PageSearch>

    <el-table :height="calTableHeight()" ref="mianRef" v-loading="loading" :data="tableData">
      <!-- 创建日期 sku数量 取货人 电话 邮编 地址1 地址2 地址3 状态 操作 -->
      <el-table-column show-overflow-tooltip label="创建日期" align="center" prop="createTime" width="150" />
      <el-table-column show-overflow-tooltip label="店铺名称" align="center" prop="name" width="150" />
      <el-table-column show-overflow-tooltip label="sku数量" align="center" prop="skuNum" />
      <el-table-column show-overflow-tooltip label="取货人" align="center" prop="receiveName" />
      <el-table-column show-overflow-tooltip label="电话" align="center" prop="receivePhone" />
      <el-table-column show-overflow-tooltip label="邮编" align="center" prop="receivePostcode" />
      <el-table-column show-overflow-tooltip label="地址1" align="center" prop="address1" />
      <el-table-column show-overflow-tooltip label="地址2" align="center" prop="address2" />
      <el-table-column show-overflow-tooltip label="地址3" align="center" prop="address3" />
      <el-table-column show-overflow-tooltip label="状态" align="center" prop="status">
        <template slot-scope="{ row }">
          <!-- 状态: 1:创建中 2:已提交 3:已完成 4:已取消 -->
          <div :style="{ color: $randomColor(row.status) }" v-if="row.status == 1">创建中</div>
          <div :style="{ color: $randomColor(row.status) }" v-if="row.status == 2">已提交</div>
          <div :style="{ color: $randomColor(row.status) }" v-if="row.status == 3">已完成</div>
          <div :style="{ color: $randomColor(row.status) }" v-if="row.status == 4">已取消</div>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column :label="$t('操作')" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <span class="el-dropdown-link">
              {{ $t('更多') }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- 创建中可以添加产品 -->
              <el-dropdown-item
                :disabled="row.status != 1"
                command="1"
                v-hasPermi="['distribution:skuSellerOfflineSku:add']"
              >
                {{ $t('添加产品') }}
              </el-dropdown-item>
              <el-dropdown-item command="2" v-hasPermi="['distribution:skuSellerOfflineSku:list']">
                {{ $t('查看产品') }}
              </el-dropdown-item>
              <!-- 创建中可以提交  -->
              <el-dropdown-item
                :disabled="row.status != 1"
                command="3"
                v-hasPermi="['distribution:skuSellerOffline:submit']"
              >
                {{ $t('提交取货单') }}
              </el-dropdown-item>
              <!-- 创建中可以取消  -->
              <el-dropdown-item
                :disabled="row.status != 1"
                command="4"
                v-hasPermi="['distribution:skuSellerOffline:cancel']"
              >
                {{ $t('取消') }}
              </el-dropdown-item>

              <el-dropdown-item
                command="5"
                :disabled="row.status != 1"
                v-hasPermi="['distribution:skuSellerOffline:edit']"
              >
                {{ $t('编辑客户信息') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <CreateOrder :show.sync="createOrder.show" @getList="getList" :formData="createOrder.formData" />
    <EditOrder :show.sync="editOrder.show" @getList="getList" :formData="editOrder.formData" />
    <AddProducts :show.sync="addProducts.show" @getList="getList" :formData="addProducts.formData" />
    <ViewProducts :show.sync="viewProducts.show" @getList="getList" :formData="viewProducts.formData" />
  </div>
</template>

<script>
import { checkSku, syncData } from '@/api/orderManage/mercariPersonalSync'
import { cancel, list, submit } from '@/api/orderManage/skuSellerOffline'
import { getDistributorShopList } from '@/api/statistics/skuSaleSeller'
import AddProducts from './components/addProducts.vue'
import CreateOrder from './components/createOrder.vue'
import EditOrder from './components/editOrder.vue'

import ViewProducts from './components/viewProducts.vue'
export default {
  activated() {
    this.$nextTick(() => this.$refs['mianRef']?.doLayout())
  },
  name: 'OfflinePickup',
  components: {
    EditOrder,
    CreateOrder,
    AddProducts,
    ViewProducts,
  },
  data() {
    return {
      createOrder: {
        show: false,
        formData: {},
      },
      editOrder: {
        show: false,
        formData: {},
      },

      viewProducts: {
        show: false,
        formData: {},
      },
      addProducts: {
        show: false,
        formData: {},
      },

      // 遮罩层
      loading: true,

      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 供应厂家表格数据
      tableData: [],
      distributorShopList: [],
      // 查询参数
      queryParams: {
        time: [],
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.getList()
    getDistributorShopList({ platformType: 9 }).then((res) => {
      this.distributorShopList = res.data
    })
  },
  methods: {
    handleCreateOrder() {
      this.createOrder.show = true
    },
    handleEditOrder(row) {
      this.editOrder.formData = row
      this.editOrder.show = true
    },
    handleCommand(command, row) {
      console.log(`command ==>`, command)
      switch (command) {
        case '1':
          this.addProducts.show = true
          this.addProducts.formData = row
          break
        case '2':
          this.viewProducts.show = true
          this.viewProducts.formData = row
          break
        case '3':
          this.$confirm(this.$t('确认提交?'), this.$t('提示'), {
            type: 'warning',
          }).then(() => {
            const data = { id: row.id }
            submit(data).then((res) => {
              const { code, data, msg } = res
              if (code === 200) {
                this.$message({ type: 'success', message: msg })
                this.getList()
              }
            })
          })
          break
        case '4':
          this.$confirm(this.$t('确认取消?'), this.$t('提示'), {
            type: 'warning',
          }).then(() => {
            const data = { id: row.id }
            cancel(data).then((res) => {
              const { code, msg } = res
              if (code === 200) {
                this.$message({ type: 'success', message: msg })
                this.getList()
              }
            })
          })
          break
        case '5' /**编辑客户信息 */:
          this.handleEditOrder(row)
          break

        default:
          break
      }
    },
    handleSync(row) {
      checkSku(row.recordsId).then((res) => {
        const { code, data } = res
        if (code === 200 && !data) {
          syncData({ distrId: row.distrId, recordsId: row.recordsId }).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.getList()
            }
          })
        } else {
          this.errList.show = true
          this.errList.formData = data
        }
      })
    },

    handleDetail(row) {
      this.detail.show = true
      this.detail.formData = row
    },

    /** 查询供应厂家列表 */
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      list(data).then((response) => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.reset()
    },
    // 表单重置
    reset() {
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageSize = 10
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
  },
}
</script>
